<template >
    <div class="bg">
    <div class="personal-info-container ">  
        <!-- <el-card style="width: 60%; margin-left: 120px; margin-top: 40px"> -->
            <h2 class="personal-info-title">个人信息</h2>
            <el-form :model="form" ref="form" label-width="80px">
                <!-- 用户名 -->
                <el-form-item label="用户名">
                    <el-input style="width: 80%" v-model="form.username" disabled></el-input>
                </el-form-item>

                <!-- 姓名 -->
                <el-form-item label="姓名">
                    <el-input style="width: 80%" v-model="form.nickName"></el-input>
                </el-form-item>

                <!-- 权限 -->
                <!-- <el-form-item label="权限">
                    <span v-if="form.role == 1" style="margin: 5px">管理员</span>
                    <span v-if="form.role == 2" style="margin: 5px">读者</span>
                </el-form-item> -->

                <!-- 电话号码 -->
                <el-form-item label="电话号码">
                    <el-input style="width: 80%" v-model="form.phone"></el-input>
                </el-form-item>

                <!-- 性别 -->
                <el-form-item label="性别">
                    <div>
                        <el-radio v-model="form.sex" label="男">男</el-radio>
                        <el-radio v-model="form.sex" label="女">女</el-radio>
                    </div>
                </el-form-item>

                <!-- 地址 -->
                <el-form-item label="地址">
                    <el-input type="textarea" style="width: 80%" v-model="form.address"></el-input>
                </el-form-item>
            </el-form>
            <div class="button-container">
                <el-button type="primary" @click="update">保存</el-button>
            </div>
    </div>
</div>
</template>

<script>
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

export default {
    name: 'Person',
    data() {
        return {
            form: {
                photo: '', // 确保 form 中有 photo 属性
            },
        };
    },
    created() {
        // 从 sessionStorage 中获取用户信息
        let str = sessionStorage.getItem('user') || '{}';
        this.form = JSON.parse(str);
    },
    methods: {
        async update() {
            // 更新用户信息
            let res = await request.put('/user/edit', this.form);
            if (res.status == 200) {
                ElMessage.success('更新成功');
                sessionStorage.setItem('user', JSON.stringify(this.form));
                this.$emit('userInfo');
            } else {
                ElMessage.error(res.message || '更新失败');
            }
        },
    },
};
</script>

<style>
/* 样式调整 */
.bg{
    display: flex;
    background: url('../img/111.jpg') no-repeat ;
    background-size: cover;
}
/* 主容器样式 */  
.personal-info-container {  
  /* 使用 Flex 布局 */  
  display: flex;  
  /* 设置为列布局 */  
  flex-direction: column;  
  /* 宽度设置为100%，但最大宽度为600px */  
  width: 100%;  
  max-width: 600px;  
  /* 水平居中 */  
  margin: auto; 
  /* 内部间距 */  
  padding: 20px;  
  /* 梯度背景 */  
  background: linear-gradient(135deg, #f9f9f9 0%, #ececec 100%);  
  /* 阴影效果 */  
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);  
  /* 边角弧度 */  
  border-radius: 12px;  
}
/* 按钮容器样式 */  
.button-container {  
  /* 水平居中 */  
  text-align: center;  
  /* 上方间距 */  
  margin-top: 20px;  
}  
.personal-info-title {  
  text-align: center;  
  padding-bottom: 20px;  
  font-size: 28px;  
  color: #333;  
}  
</style>
